<template>
  <div class="consult-container">
    <!-- 顶部导航栏 -->
    <van-nav-bar title="分答咨询" fixed placeholder />

    <!-- 主要内容区域 -->
    <div class="content-section">
      <!-- 问题描述输入区域 -->
      <div class="section-title">请详细描述问题，至少30字</div>
      <van-field
        type="textarea"
        rows="4"
        maxlength="300"
        show-word-limit
        placeholder="请输入详细问题描述"
        class="question-input"
        v-model="inputText"
        @input="updateCountAndSave"
      >
        <!-- 自定义字数统计 -->
        <template #word-limit>
          <div class="custom-counter">{{ count }}/300</div>
        </template>
      </van-field>

      <!-- 版块信息 -->
      <van-divider />
      <div class="section-row">
        <span class="section-title">版块</span>
        <van-cell title="互联网 / IT" class="inline-cell" />
      </div>

      <!-- 标签选择区域 -->
      <van-divider />
      <div class="section-title bold-text">标签（请选择相应的公司，部门和职位）</div>
      <van-dropdown-menu class="tag-dropdown">
        <!-- 使用下拉菜单能使得用户更加具有体现性 -->
        <!-- 公司下拉菜单 -->
        <van-dropdown-item
          v-model="companyValue"
          :options="companyOptions"
          :title="companyTitle"
          @change="handleCompanyChange"
        />
        <!-- 部门下拉菜单 -->
        <van-dropdown-item
          v-model="departmentValue"
          :options="departmentOptions"
          :title="departmentTitle"
          @change="handleDepartmentChange"
        />
        <!-- 职位下拉菜单 -->
        <van-dropdown-item
          v-model="positionValue"
          :options="positionOptions"
          :title="positionTitle"
          @change="handlePositionChange"
        />
      </van-dropdown-menu>

      <!-- 邀请大V区域 -->
      <van-divider />
      <div class="section-title bold-text">邀请大V：</div>
      <div class="invite-container">
        <div class="invite-grid">
          <!-- 循环渲染大V头像和姓名 -->
          <div
            v-for="(item, index) in displayExperts"
            :key="index"
            class="invite-circle-container"
            @click="handleInviteClick(item)"
          >
            <div class="invite-circle">
              <img
                :src="item.Avator ? getImageUrl(item.Avator) : '../../../dist/img/add.jpg'"
                class="avatar-img"
                :alt="item.Avator ? '大V头像' : '添加大V'"
              />
            </div>
            <div class="expert-name" v-if="item.UserName">{{ item.UserName }}</div>
          </div>
        </div>
      </div>

      <!-- 付费问答说明和支付按钮 -->
      <van-divider />
      <div class="section-title">付费问答：</div>
      <div class="pay-desc">
        <div>· 付费提问并邀请最多三位学生。24小时内问题被回答需要选择最佳回答，费用价格最佳答主，可追问一次</div>
        <div>· 匿名提问、答主、旁听者不可见您的信息</div>
        <div>· 问题所有权归平台和提问者所有，不可私自公开</div>
      </div>
      <van-button block class="pay-button">支付 ¥20 提问</van-button>
    </div>
  </div>
</template>

<script>
import {
  NavBar as VanNavBar,
  Field as VanField,
  Divider as VanDivider,
  Cell as VanCell,
  Button as VanButton,
  DropdownMenu as VanDropdownMenu,
  DropdownItem as VanDropdownItem,
} from 'vant';
import { mapState, mapMutations } from 'vuex';

export default {
  name: 'IndexPage',
  components: {
    VanNavBar,
    VanField,
    VanDivider,
    VanCell,
    VanButton,
    VanDropdownMenu,
    VanDropdownItem,
  },
  data() {
    return {
      count: 0, // 问题描述的字数统计
      experts: [], // 大V列表
      // 公司下拉菜单选项
      companyOptions: [
        { text: '请选择公司', value: '', companyId: 0 },
        { text: '阿里巴巴', value: 1, companyId: 1 },
      ],
      // 部门下拉菜单选项
      departmentOptions: [
        { text: '请选择部门', value: '', departmentId: 0 },
        { text: '技术部', value: 1, departmentId: 1 }
      ],
      // 职位下拉菜单选项
      positionOptions: [
        { text: '请选择职位', value: '', positionId: 0 },
        { text: '前端工程师', value: 1, positionId: 1 },
        { text: '后端工程师', value: 2, positionId: 2 }
      ],
      companyTitle: '公司', // 公司下拉菜单标题
      departmentTitle: '部门', // 部门下拉菜单标题
      positionTitle: '职位', // 职位下拉菜单标题
    };
  },
  computed: {
    // 映射vuex中的状态
    ...mapState(['companyId', 'departmentId', 'positionId', 'questionInput', 'invitedExperts']),
    // 显示的大V列表，最多显示3个
    displayExperts() {
      const defaultItems = Array(3).fill({ Avator: '', UserName: '' });
      return [...this.invitedExperts, ...defaultItems].slice(0, 3);
    },
    // 公司下拉菜单的值，与vuex中的companyId同步
    companyValue: {
      get() {
        return this.companyId;
      },
      set(value) {
        this.SET_COMPANY(value);
      },
    },
    // 部门下拉菜单的值，与vuex中的departmentId同步
    departmentValue: {
      get() {
        return this.departmentId;
      },
      set(value) {
        this.SET_DEPARTMENT(value);
      },
    },
    // 职位下拉菜单的值，与vuex中的positionId同步
    positionValue: {
      get() {
        return this.positionId;
      },
      set(value) {
        this.SET_POSITION(value);
      },
    },
    // 问题描述的输入值，与vuex中的questionInput同步
    inputText: {
      get() {
        return this.questionInput;
      },
      set(value) {
        this.SET_QUESTION_INPUT(value);
      },
    },
  },
  methods: {
    // 映射vuex中的mutations
    ...mapMutations([
      'SET_COMPANY',
      'SET_DEPARTMENT',
      'SET_POSITION',
      'SET_QUESTION_INPUT',
      'SET_INVITED_EXPERTS',
    ]),
    // 更新字数统计并保存输入内容
    updateCountAndSave() {
      this.count = this.inputText.length;
    },
    // 获取大V头像的URL
    getImageUrl(avatar) {
      return `../../../dist/img/${avatar}`;
    },
    // 处理公司下拉菜单变化
    handleCompanyChange(value) {
      this.companyValue = value;
      const company = this.companyOptions.find((item) => item.value === value);
      this.companyTitle = company?.text === '请选择公司' ? '公司' : company?.text || '公司';
    },
    // 处理部门下拉菜单变化
    handleDepartmentChange(value) {
      this.departmentValue = value;
      const department = this.departmentOptions.find((item) => item.value === value);
      this.departmentTitle = department?.text === '请选择部门' ? '部门' : department?.text || '部门';
    },
    // 处理职位下拉菜单变化
    handlePositionChange(value) {
      this.positionValue = value;
      const position = this.positionOptions.find((item) => item.value === value);
      this.positionTitle = position?.text === '请选择职位' ? '职位' : position?.text || '职位';
    },
    // 验证输入是否完整
    validateInputs() {
      return this.companyValue !== '';
    },
    // 处理邀请大V点击事件
    handleInviteClick() {
      if (!this.validateInputs()) {
        this.$toast('请先选择公司');
        return;
      }
      this.$router.push('/invite');
    },
  },
  created() {
    // 初始化下拉菜单的默认值
    this.SET_COMPANY(this.companyOptions[0].value);
    this.SET_DEPARTMENT(this.departmentOptions[0].value);
    this.SET_POSITION(this.positionOptions[0].value);
  },
};
</script>

<style scoped lang="scss">
/* 引入公共样式 */
@import '../style/index';
</style>